import React, { useEffect } from "react";
import "./Todo.css";
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { useState } from "react";
import { nanoid } from 'nanoid'

export default function Todo() {
  //声明任务的状态
  let [todos, setTodos] = useState([
    { id: 1, title: "买冰汤圆", done: false },
    { id: 2, title: "吃羊肉泡馍", done: true },
  ]);

  //声明一个函数, 用来新增任务
  let addTodo = (title) => {
    //
    setTodos([
      ...todos,
      {
        id: nanoid(),
        title: title,
        done: false
      }
    ])
  }

  //声明一个函数, 用来改变任务的完成状态
  //                2   false
  let modifyTodo = (id, done) => {
    //map
    let newTodos = todos.map(item => {
      if(item.id === id){
        item.done = done
      }
      return item;
    });
    //修改状态
    setTodos(newTodos);
  }

  //声明函数, 删除某一个任务  2
  let removeTodo = (id) => {
    //过滤
    let newTodos = todos.filter(item => item.id !== id);
    //设置
    setTodos(newTodos);
  }

  //声明函数修改所有任务的状态 true false
  let checkAllTodo = (done) => {
    let newTodos = todos.map(item => {
      //修改每个任务的状态
      item.done = done;
      return item;
    });
    //修改状态
    setTodos(newTodos);
  }

  //声明函数 移除已经完成的任务
  let removeDoneTodos = () => {
    let newTodos = todos.filter(item => !item.done);
    //更新状态
    setTodos(newTodos);
  }

  //测试函数
  useEffect(() => {
    //测试新增任务
    // addTodo('吃biangbiang面');
    //测试修改某个任务
    // modifyTodo(2, false)
    //测试移除任务
    // removeTodo(2);
    //测试修改所有任务状态
    // checkAllTodo(false);
    //测试删除完成的任务
    // removeDoneTodos();
  }, [])

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain 
          modifyTodo={modifyTodo} 
          todos={todos}  
          removeTodo={removeTodo}
          />
        <TodoFooter 
          todos={todos}
          checkAllTodo={checkAllTodo} 
          removeDoneTodos={removeDoneTodos}
        />
      </div>
    </div>
  );
}
